<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/share/taglib.jsp" %>
<% String path = request.getContextPath() ;%>
<link href="<%=path%>/style/screen.css" rel="stylesheet" type="text/css" />    
<link href="<%=path%>/script/jquery17/ui.all.css" rel="stylesheet" type="text/css" />
 <link href="<%=path%>/script/jquery17/demos.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" src="<%=path%>/script/jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="<%=path%>/script/jquery17/jquery.bgiframe.js"></script>
 <script type="text/javascript" src="<%=path%>/script/jquery17/ui.core.js"></script>
 <script type="text/javascript" src="<%=path%>/script/jquery17/ui.dialog.js"></script>
<style type="text/css">
		/*body { font-size: 62.5%; }*/
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain {  width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none;  !important; cursor:pointer; position: relative; text-align: center; }
		.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em;  }
		
		
	</style>
	<script type="text/javascript">
	function IsEmail()     
	{     
	        var str = document.getElementById('emailaddress').value.trim();    
	        if(str.length!=0){    
		        reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;    
		        if(!reg.test(str)){    
		            //alert("对不起，您输入的邮箱格式不正确!");//请将“字符串类型”要换成你要验证的那个属性名称！    
		            $("#conmessage").html("<div><font color='red'>"+"邮箱格式不正确!"+"</font></div>")
		            return false;
		        }  
		        return true;  
	        } else
	        {
	        	 $("#conmessage").html("<div><font color='red'>"+"邮箱不能为空!"+"</font></div>")
	        	 return false;
	        }
	           
	}     
	$(function() {
		$("#contactdialog").dialog({
			bgiframe: true,
			autoOpen: false,
			height: 280,
			width: 350,
			modal: true,
			buttons: {
				Cancel: function() {
					$(this).dialog('close');
				}
			}
		});
		
		$('#contactmodal').click(function() {
			$("#conmessage").html("");
			$('#contactdialog').dialog('open');
		})
		
		.hover(
			function(){ 
				$(this).addClass("ui-state-hover"); 
			},
			function(){ 
				$(this).removeClass("ui-state-hover"); 
			}
		).mousedown(function(){
			$(this).addClass("ui-state-active"); 
		})
		.mouseup(function(){
				$(this).removeClass("ui-state-active");
		});
		//为获取单个值的按钮注册鼠标单击事件
		$("#contactsave").click(function(){
		if(!IsEmail())return;
		var params = $("#contactform").serialize();
		$.ajax({
			url:"subscription_add.action",
			type:"POST",
			data:params,
			dataType:"json",
			success:function(data){
				//清空显示层中的数据
				$("#conmessage").html("");
				if(data.message == "提交成功"){
					//$("#fullname").val("");
					$("#emailaddress").val("");
					//$("#phonenumber").val("");
					$("#contactcomments").val("");
					alert("提交成功!");
					$("#contactdialog").dialog('close');
				}
				else{//为显示层添加获取到的数据
					$("#conmessage").html("<div><font color='red'>"+data.message+"</font></div>")
				}
			}
		});
			//$.getJSON("contact_add.action",function(data){
			//	$("#conmessage").html("<font color='red'>"+data.message+"</font>");
			//});
		});
	});
	
		
	</script>
<div id="contactdialog" title="提交订阅">
<form id="contactform">
  <div class="contact_infomation">
		
		<div id="conmessage"></div>
		<table width="681" border="0" cellspacing="0" cellpadding="0">
			
			<tr>
				<th>邮箱：</th>
				<td>
				<input type="text" name="emailaddress" id="emailaddress" class="text1" maxlength="30" style="width:210px;" /></td>
			</tr>
			
			<tr>
				<th>留言：</th>
				<td><textarea name="remark" id="contactcomments" class="text3" style="width:200px;height:50px;" maxlength="200"></textarea>
				</td>
			</tr>
			<tr>
			<th>&nbsp;</th>
				<td colspan="2" style="text-align:right;"><input type="button" name="submit" id="contactsave" value="提交" /></td>
			</tr>
		</table>
	</div>
</form>
</div>

<!-- Head End -->